<template>
  <div>
    <p>姓名: {{ person.name }}, 年龄: {{ person.age }}</p>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <br />
    <button @click="changeName2">修改姓名2</button>
    <button @click="changeAge2">修改年龄2</button>
    <hr />
    <h2>演示 rowMark</h2>
    <div>
      <span>{{ car2 }}</span>
      <button @click="changeCarColor">changeColor</button>
      <button @click="changeCarPrice">changePrice</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, markRaw } from "vue";

const person = reactive({
  name: "张三",
  age: 18,
});

// person2 和 person 数据是存储在一起的
const person2 = toRaw(person);

function changeName() {
  person.name += "~";
}

function changeAge() {
  person.age += 1;
}

function changeName2() {
  // 虽然不会响应式改变页面显示，但是数据其实已经被修改了
  person2.name += "~";
}

function changeAge2() {
  person2.age += 1;
}

const car = markRaw({
  color: "red",
  price: 39000,
});
const car2 = reactive(car);
function changeCarColor() {
  car2.color += "*";
}
function changeCarPrice() {
  car2.price += 10;
}
</script>

<style scoped></style>
